<template>
  <div class="page-container">
    <div class="toolbar" style="padding-top:10px;padding-left:15px;">
      <el-form
        :inline="true"
        :model="dataForm"
        style="text-align:left;"
        ref="dataForm"
        :rules="dataFormRules"
        :size="size"
        class="form"
      >
        <el-row>
          <el-form-item label="头像：" prop="url">

             <div style="float: left;">
              <ul class="el-upload-list el-upload-list--picture-card">
                <li
                  v-for="(bill_photo,index) in bill_photo_list"
                  :key="index"
                  :tabindex="index"
                  class="el-upload-list__item is-success"
                >
                  <img :src="bill_photo" alt class="el-upload-list__item-thumbnail" />
                  <label class="el-upload-list__item-status-label">
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </label>
                  <i class="el-icon-close"></i>
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview">
                      <i class="el-icon-zoom-in" @click="handlePictureCardPreview(null,bill_photo)"></i>
                    </span>
                    <span class="el-upload-list__item-delete">
                      <i class="el-icon-delete" @click="handleRemove(null,null,index)"></i>
                    </span>
                  </span>
                </li>
              </ul>
            </div>

            <el-upload
              :action="imgUpload"
              :on-success="handleAvatarSuccess"
              list-type="picture-card"
              v-model="dataForm.url"
              accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :limit="1"
			        v-if="bill_photo_list.length < 1"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisibleImage">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>

        </el-row>
        <el-row style="text-align: left;">

          <el-form-item label="用户名：" prop="username">
            <el-input v-model="dataForm.username" auto-complete="off"></el-input>
          </el-form-item>

        </el-row>
        <el-row>
          <el-form-item label="手机：" prop="mobile" label-width="77px">
           <el-input v-model="dataForm.mobile" auto-complete="off"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="性别：" prop="sex" label-width="77px">
             <el-select v-model="dataForm.sex" style="width:200px" clearable filterable>
              <el-option label="男" :value="1">男</el-option>
              <el-option label="女" :value="2">女</el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row >
          <el-form-item label="生日：" prop="birthday" label-width="77px">
             <el-date-picker v-model="dataForm.birthday" type="date" style="width:200px" placeholder="请选择" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-row>

        <el-row >
          <el-form-item label="密码：" prop="passwords" label-width="77px">
            <el-input
              v-model="dataForm.passwords"
              type="password"
              @focus="changepass"
              readonly
              placeholder="建议定期修改密码，已保护账户安全"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-row>

        <el-row v-show="false">
          <el-form-item label="店铺ID：" prop="storeId" label-width="77px" >
            <el-input v-model="dataForm.storeId" auto-complete="off" ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:left;">
        <el-button @click="$router.go(-1)">取消</el-button>
        <el-button type="primary" @click.native="submitForm">保存</el-button>
      </div>
    </div>

    <!--编辑密码界面-->
    <el-dialog
      title="编辑"
      width="25%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dataForm"
        label-width="150px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        inline
      >
        <el-row class="searchDialog-input">
          <el-form-item label="ID：" prop="id" v-if="false">
            <el-input v-model="dataForm.id" :disabled="true" auto-complete="off" placeholder="请输入ID"></el-input>
          </el-form-item>
          <el-form-item label="原密码：" prop="oldpassword">
            <el-input
              v-model="dataForm.oldpassword"
              type="password"
              auto-complete="off"
              maxlength="20"
              placeholder="请输入原密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="newpassword">
            <el-input
              v-model="dataForm.newpassword"
              type="password"
              auto-complete="off"
              maxlength="20"
              placeholder="请输入新密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="confimpassword">
            <el-input
              v-model="dataForm.confimpassword"
              type="password"
              auto-complete="off"
              maxlength="20"
              placeholder="请输入确认密码"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native="editPassWord">{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapState } from "vuex";
import Cookies from "js-cookie";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import Vue from "vue";

export default {
  name: "Login",
  components: {
    ThemePicker,
    LangSelector,
  },
  data() {
    return {
      imgUpload: this.utils.getUpLoadHost1(),
      imageUrl: "",
      size: "small",
      response: {},
      file: {},
      fileList: {},
      imgs: "",
      goods: "goods",
      dataForm: {
        id:"",
        mobile:"",
        name: "",
        businesslicense: "",
        paperworkPhoto: "",
        managerPhoto: "",
        password:""
      },

      dialogImageUrl: "",
      bill_photo_list: [],
      loading: false,
      dialogVisibleImage: false,
      editDialogVisible: false,
      loginForm: {
        account: "",
        password: "",
        captcha: "",
        src: ""
      },
      dataFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入手机", trigger: "change" },
          {pattern:/^1[3456789]\d{9}$/,message:'请输入正确的手机号'}
        ],
        sex: [
          { required: true, message: "请选择性别", trigger: "change" }
        ],
        birthday: [
          { required: true, message: "请输入生日", trigger: "blur" }
        ],
        oldpassword: [
          { required: true, message: "请输入原密码", trigger: "blur" }
        ],
        newpassword: [
          { required: true, message: "请输入新密码", trigger: "blur" }
        ],
        confimpassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" }
        ]
      },
      checked: true,
      customer_type_options: [],
      paperwork_type_options: [],
      trade_type_options: []
    };
  },
  methods: {
    queryUserList(){
        var that=this;
        var id=localStorage.getItem('userId')
        this.utils.request.getSysUserInfoByToken({'token':localStorage.getItem("token")},function(data){
          if (data.code == "0000") {
        console.log(data);
					that.bill_photo_list = [data.data.url];
					that.dataForm = data.data;
					} else {
						// that.$message({ message: "获取个人信息异常", type: "error" });
					}

			})
		},
    // 编辑
    submitForm: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = {
              "username": this.dataForm.username,
              "birthday": this.dataForm.birthday,
              "id": this.dataForm.id,
              "mobile": this.dataForm.mobile,
              "sex": this.dataForm.sex,
              "url": this.dataForm.url,
              "type": this.dataForm.type,
              "storeId":this.dataForm.storeId
            };
            // params.document_license=this.ImageUrl;
            params.token = localStorage.getItem('token');
            this.utils.request.editSysUser(params, this.editInfoBack);
          });
        }
      });
    }, // 新增修改回调
    editInfoBack: function(data) {
      if (data.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
      } else {
        this.$message({ message: "操作失败, ", type: "error" });
      }
    },
    Jump() {
      this.$router.go(-1);
    },
    //图片移除
    handleRemove(file, fileList, index) {
      if (this.utils.isNull(index)) {
        this.fileList = fileList;
        if (fileList.length == 0) {
          this.dataForm.url = "";
        } else {
          this.imgs = fileList
            .map(item => item.response.data.imgUrl)
            .toString();
          this.dataForm.document_license = this.imgs;
        }
      } else {
        this.bill_photo_list.splice(index, 1);
      }
      console.log(this.dataForm.document_license);
    },
    //处理图片卡预览
    handlePictureCardPreview(res, file) {
      this.dialogImageUrl = file;
      this.dialogVisibleImage = true;
    },
    //上传成功回调
    handleAvatarSuccess(res, file) {
      if (res.data.imgUrl == "") {
        this.$message({ message: "上传失败", type: "error" });
      } else {
        this.dataForm.url = res.data.imgUrl;
        console.log(this.dataForm.businesslicense);
        this.imageUrl = URL.createObjectURL(file.raw);
      }
    },
    //修改密码显示
    changepass: function() {
      this.editDialogVisible = true;
    },
    //修改密码
    editPassWord: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            var id = localStorage.getItem("id");
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            this.utils.request.editSysUserPassWord(params, data => {
              if (data.code == "0000") {
                this.editDialogVisible = false;
                this.$message({ message: "操作成功", type: "success" });
              } else {
                this.$message({
                  message: "操作失败," + data.msg,
                  type: "error"
                });
              }
            });
          });
        }
      });
    },
  },
  mounted() {
    this.queryUserList();
  },
  computed: {
    ...mapState({
      themeColor: state => state.app.themeColor
    })
  }
};
</script>
<style  scoped>
/deep/ .form .el-input__inner {
  width: 200px !important;
}
 .el-form-item--mini.el-form-item,
 .el-form-item--small.el-form-item  {
      margin-bottom: 10px;
}
</style>
